<template>
  <!-- 我的账户 -->
  <view class="account-page" :style="my_style">
    <view class="header flex-between fdc white-color">
      <view class="font-64 lh-90">{{ balance }}</view>
      <view class="font-30 lh-42 u-m-b-20">账户余额</view>
      <!-- <view class="header-btn font-26" @click="jump('/views/user/account/recharge')">充值</view> -->
    </view>
    <view class="tabs-box border-bottom1">
      <u-tabs
        ref="uTabs"
        height="104"
        bar-width="126"
        bar-height="4"
        :current="current"
        :list="tabs"
        :is-scroll="false"
        :active-color="theme_color"
        inactive-color="#999"
        @change="tabsChange"
      />
    </view>
    <!-- 列表 -->
    <view class="account-list">
      <common-list @load="getAccountList" :list="list" :status="status">
        <template #list>
          <view class="bg-white u-p-l-24 u-p-r-24" v-for="(item, index) in list" :key="index">
            <view class="border-bottom1 account-list-item flex-between">
              <view class="df fdc">
                <view class="font-32 lh-44 u-m-b-14">{{ item.type_name }}</view>
                <text class="font-24 lh-34 light-color">{{
                  $u.timeFormat(item.create_time, 'yyyy.mm.dd hh:MM:ss')
                }}</text>
              </view>
              <text class="font-36">{{ item.account_data }}</text>
            </view>
          </view>
        </template>
        <template #empty>
          <empty />
        </template>
      </common-list>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          {
            name: '全部',
            state: 1,
          },
          {
            name: '收入',
            state: 2,
          },
          {
            name: '支出',
            state: 3,
          },
        ],
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        page: 1,
        list: [],
        status: 'loading',
        balance: '',
        balance_money: '',
        point: '',
      }
    },
    onLoad(options) {
      this.getMemberAccountInfo('balance')
      this.getAccountList()
    },
    onReachBottom() {
      uni.$emit('onReachBottom')
    },
    methods: {
      tabsChange(index) {
        this.current = index
        this.refreshList(this.getAccountList)
      },
      /**
       * 用户财务-用户账户信息
       */
      async getMemberAccountInfo(account_type) {
        let params = {
          account_type,
        }
        const res = await this.$api.common.user('getMemberAccountInfo', params)
        if (res.code === 200) {
          console.log(res)
          const { balance_money, balance } = res.data
          this[account_type] = +balance_money + +balance
        }
      },
      /**
       * 用户财务-财务明细
       */
      async getAccountList() {
        const { page, limit, current } = this
        let params = {
          page,
          limit,
          account_type: 'balance',
          change_type: current,
        }
        this.status = 'loading'
        const res = await this.$api.common.user('getAccountList', params)
        if (res.code === 200) {
          const { count, list } = res.data
          this.list = [...this.list, ...list]
          if (this.list.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .account-page {
    .header {
      height: 388rpx;
      padding: 80rpx 0 104rpx;
      background: var(--color);

      &-btn {
        width: 116rpx;
        height: 52rpx;
        line-height: 52rpx;
        color: #fff;
        text-align: center;
        border: 1px solid #fff;
        border-radius: 30rpx;
      }
    }

    .account-list {
      &-item {
        padding: 24rpx 0;
      }
    }
  }
</style>
